<template>
    <el-popover
        v-model:visible="visible"
        :disabled="disabled"
        :show-after="200"
        :placement="placement"
        :width="props.width"
        popper-class="pop-class"
        trigger="click"
        @show="show"
        @hide="close">
        <template #reference>
            <slot name="button"></slot>
        </template>
        <div>
            <slot name="content"></slot>
            <div class="w100 text-right mt-30">
                <e-button type="assistant" @click="close">取消</e-button>
                <e-button :loading="loading" @click="handleSure">确定</e-button>
            </div>
        </div>
    </el-popover>
</template>
<script setup>
const props = defineProps({
    width: {
        type: String || Number,
        default: '529px'
    },
    disabled: {
        type: Boolean,
        default: false
    },
    placement: {
        type: String,
        default: 'bottom-start'
    }
})
const visible = ref(false);
const loading = ref(false);
const emits = defineEmits(['show', 'close', 'handleSure'])
const show = () => {
    visible.value = true;
    emits('show')
}
const close = () => {
    loading.value = false;
    visible.value = false;
    // emits('close')
}
const handleSure = () => {
    loading.value = true;
    emits('handleSure')
}
defineExpose({
    show,
    close,
    closeLoading: () => {
        loading.value = false;
    }
})
</script>

<style lang="scss">
.pop-class {
    box-shadow: 0px 4px 14px 2px rgba(235,235,235,0.63) !important;
    padding: 26px 35px !important;
}
</style>